import { ref, onMounted, Ref } from 'vue';
import { debounce } from 'lodash';
import { useEventListener } from '@vueuse/core';
/* vue*/
import { EmitEvent } from "@model/VC";

export function useCollapse(collapsable: Ref<boolean>, emit: EmitEvent) {
  const collapseRef = ref();

  const isCollapse = ref(false);
  const needCollapse = ref(false);

  /**
   * 计算折叠
   */
  const calcCollapse = debounce(function () {
    // 工单类型 折叠计算
    const height = collapseRef.value.offsetHeight;
    needCollapse.value = height > 40; // 工单状态是否需要折叠
    isCollapse.value = false; // 工单类型展开
  }, 500);

  function toggleCollapse() {
    isCollapse.value = !isCollapse.value;
    emit('toggleCollapse')
  }

  onMounted(() => {
    calcCollapse();
    if (collapsable.value) {
      useEventListener('resize', calcCollapse);
    }
  });

  return {
    collapseRef,
    isCollapse,
    needCollapse,
    calcCollapse,
    toggleCollapse,
  };
}
